<template>
  <div class="course-center">
    <CourseCarousel :courses="carouselCourses" @course-select="handleCourseSelect" />
    <div class="course-center__cta">
      <el-button type="primary" size="large" @click="navigateToBrowse">
        浏览 / 搜索全部课程
      </el-button>
      <el-button link size="large" @click="navigateToBrowse">
        查看课程目录
      </el-button>
    </div>
    <CourseCategorySection
      title="课程分类导航"
      subtitle="按能力目标与学习阶段快速定位合适的课程"
      :categories="categoryList"
      @category-select="handleCategorySelect"
    />
    <CourseFeaturedSection
      title="课程精选"
      subtitle="热门课程、入门体验与系统训练限时优惠"
      :courses="featuredCourses"
      @course-select="handleCourseSelect"
    />
    <CoursePlaylistSection
      title="课程专辑"
      subtitle="围绕主题的课程组合，帮助你系统化学习"
      :playlists="playlistItems"
      @playlist-select="handlePlaylistSelect"
    />
    <CourseInstructorSection
      title="讲师推荐"
      subtitle="与世界各地的资深心理学家、治疗师一起学习"
      :instructors="instructorHighlights"
      @instructor-select="handleInstructorSelect"
    />
    <CourseLiveSection
      title="近期直播与活动"
      subtitle="零距离参与心理学主题分享与互动"
      :events="liveEvents"
      @event-select="handleEventSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'

import {
  courseCategoriesMock,
  featuredCoursesMock,
  playlistItemsMock,
  instructorHighlightsMock,
  liveEventsMock,
} from './course.mock.ts'

const CourseCarousel = defineAsyncComponent(
  () => import('../../components/course/CourseCarousel.vue'),
)
const CourseCategorySection = defineAsyncComponent(
  () => import('../../components/course/CourseCategorySection.vue'),
)
const CourseFeaturedSection = defineAsyncComponent(
  () => import('../../components/course/CourseFeaturedSection.vue'),
)
const CoursePlaylistSection = defineAsyncComponent(
  () => import('../../components/course/CoursePlaylistSection.vue'),
)
const CourseInstructorSection = defineAsyncComponent(
  () => import('../../components/course/CourseInstructorSection.vue'),
)
const CourseLiveSection = defineAsyncComponent(
  () => import('../../components/course/CourseLiveSection.vue'),
)

import type {
  CourseCategory,
  InstructorHighlight,
  CoursePlaylistItem,
  CourseLiveEvent,
} from '../../types/course/Course.ts'

const router = useRouter()

const categoryList: CourseCategory[] = courseCategoriesMock

const featuredCourses = featuredCoursesMock

const carouselCourses = featuredCoursesMock.slice(0, 5)

const playlistItems: CoursePlaylistItem[] = playlistItemsMock

const instructorHighlights: InstructorHighlight[] = instructorHighlightsMock

const liveEvents: CourseLiveEvent[] = liveEventsMock

const navigateToBrowse = (query: Record<string, string> = {}) => {
  router.push({ name: 'course-browse', query })
}

const openCourseDetail = (courseId: string) => {
  const resolved = router.resolve({ name: 'course-detail', params: { courseId } })
  if (typeof window !== 'undefined') {
    window.open(resolved.href, '_blank', 'noopener')
  }
}

const handleCategorySelect = (categoryId: string) => {
  navigateToBrowse({ category: categoryId })
}

const handleCourseSelect = (courseId: string) => {
  openCourseDetail(courseId)
}

const handlePlaylistSelect = (playlistId: string) => {
  navigateToBrowse({ playlist: playlistId })
}

const handleInstructorSelect = (instructorId: string) => {
  navigateToBrowse({ instructor: instructorId })
}

const handleEventSelect = (eventId: string) => {
  navigateToBrowse({ event: eventId })
}
</script>

<style scoped>
.course-center {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 48px 64px 80px;
  background-color: #f8f9fb;
  color: #1a1a1a;
}

.course-center__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: -12px;
}

@media (max-width: 960px) {
  .course-center {
    padding: 32px 24px 64px;
    gap: 48px;
  }

  .course-center__cta {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .course-center {
    padding: 28px 16px 48px;
    gap: 40px;
  }

  .course-center__cta {
    justify-content: center;
  }
}
</style>
